<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">发送兴业文件</div>
                    <div class="leave_right check_bill_int">
                        <el-input type="text" placeholder="请输入企业名称" v-model="form.keyWord" clearable @clear="chooseEnter()"></el-input>
                        <el-button type="primary" size="small" @click="chooseEnter()">搜索</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="passed_time" label="发送反馈时间">
                <template slot-scope="scope">
                    <span>{{scope.row.passed_time_Y}}</span><br/><span>{{scope.row.passed_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="corp_id" label="企业编号"> </el-table-column>
            <el-table-column prop="enterprise_name" label="企业名称"> </el-table-column>
            <el-table-column prop="verify_status" label="发送状态"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="sendDetail(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <DialogContent ref="xingyeFileDetailDialog" title="上传详情">
            <div class="rem-dialog-con">
                <el-row>
                    <el-col :span="24" class="enterprise_img_list">
                        <div>
                            <div class="enterInfo_img_box">
                                <ImageZoom :width='172' :height='148' :image="this.idCartFornt.file_path" v-if="idCartFornt.file_path != '' && idCartFornt.file_path != null && idCartFornt.file_path != undefined"></ImageZoom>
                            </div>
                            <div>
                                <UploaderImages @input="forntCartImg" uploadText="上传身份证正面" class="upload_send_btn_width"></UploaderImages>
                                <div class="send_status upload_send_btn_width" v-if="idCartFornt.send_status == 0"><el-button type="primary" size="small" @click="clickSend('A0')">点击发送</el-button></div>
                                <div class="send_status">状态：发送{{idCartFornt.send_status == 0 ? '失败':'成功'}}</div>
                            </div>
                        </div>
                        <div>
                            <div class="enterInfo_img_box">
                                <ImageZoom :width='172' :height='148' :image="this.idCartBank.file_path" v-if="idCartBank.file_path != '' && idCartBank.file_path != null && idCartBank.file_path != undefined"></ImageZoom>
                            </div>
                            <div>
                                <UploaderImages @input="bankCartImg" uploadText="上传身份证背面" class="upload_send_btn_width"></UploaderImages>
                                <div class="send_status upload_send_btn_width" v-if="idCartFornt.send_status == 0"><el-button type="primary" size="small" @click="clickSend('A1')">点击发送</el-button></div>
                                <div class="send_status">状态：发送{{idCartFornt.send_status == 0 ? '失败':'成功'}}</div>
                            </div>
                        </div>
                        <div>
                            <div class="enterInfo_img_box">
                                <ImageZoom :width='172' :height='148' :image="this.credentials.file_path" v-if="credentials.file_path != '' && credentials.file_path != null && credentials.file_path != undefined"></ImageZoom>
                            </div>
                            <div>
                                <UploaderImages @input="credentialImg" uploadText="上传营业执照" class="upload_send_btn_width"></UploaderImages>
                                <div class="send_status upload_send_btn_width" v-if="credentials.send_status == 0"><el-button type="primary" size="small" @click="clickSend('20')">点击发送</el-button></div>
                                <div class="send_status">状态：发送{{credentials.send_status == 0 ? '失败':'成功'}}</div>
                            </div>
                        </div>
                        <div>
                            <div class="enterInfo_img_box">
                                <ImageZoom :width='172' :height='148' :image="this.enterAuth.file_path" v-if="enterAuth.file_path != '' && enterAuth.file_path != null && enterAuth.file_path != undefined"></ImageZoom>
                            </div>
                            <div>
                                <UploaderImages @input="enterAuthImg" uploadText="上传企业授权书" class="upload_send_btn_width"></UploaderImages>
                                <div class="send_status upload_send_btn_width" v-if="enterAuth.send_status == 0"><el-button type="primary" size="small" @click="clickSend('40')">点击发送</el-button></div>
                                <div class="send_status">状态：发送{{enterAuth.send_status == 0 ? '失败':'成功'}}</div>
                            </div>
                        </div>
                        <div>
                            <div class="enterInfo_img_box">
                                <ImageZoom :width='172' :height='148' :image="this.unitAuth.file_path" v-if="unitAuth.file_path != '' && unitAuth.file_path != null && unitAuth.file_path != undefined"></ImageZoom>
                            </div>
                            <div>
                                <UploaderImages @input="unitAuthImg" uploadText="上传单位授权书" class="upload_send_btn_width"></UploaderImages>
                                <div class="send_status upload_send_btn_width" v-if="unitAuth.send_status == 0"><el-button type="primary" size="small" @click="clickSend('41')">点击发送</el-button></div>
                                <div class="send_status">状态：发送{{unitAuth.send_status == 0 ? '失败':'成功'}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </DialogContent>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import moment from 'moment';
    import DialogContent from '@component/common/DialogContent.vue';
    import UploaderImages from '@/component/common/UploaderImages.vue';
    import ImageZoom from '@/component/common/ImageZoom.vue';
    @Component({
        extends: Pagination,
        components: {
            DialogContent,
            UploaderImages,
            ImageZoom
        }
    })
    export default class SendXYManage extends Vue {
        form = {
            keyWord: '',
            enterpriseId: ''
        }
        enterpriseForm = []
        tableData = []
        idCartFornt = {}
        idCartBank = {}
        credentials = {}
        enterAuth = {}
        unitAuth = {}
        async getXingYeList () {
            let params = {
                isAlive: 7,
                keyword: this.form.keyWord,
                n: this.pagination.pageSize,
                p: this.pagination.currentPage
            }
            let res = await this.$http.get('customers/enterprise', {params})
            if (res.status == 200) {
                let { enterprises, page_info } = res.data;
                enterprises.forEach((i) => {
                    if (i.passed_time != '' && i.passed_time != null) {
                        i.passed_time_Y = moment(i.passed_time).format('YYYY-MM-DD')
                        i.passed_time_H = moment(i.passed_time).format('HH:mm:ss')
                    } else {
                        i.passed_time_Y = '--'
                    }
                })
                this.tableData = enterprises;
                this.pagination.total = page_info.items_number;
            }
        }
        chooseEnter () {
            this.getXingYeList();
        }

        sendDetail (row) {
            this.form.enterpriseId = row.id;
            this.getEnterpriseInfo(row.id)
            this.$refs['xingyeFileDetailDialog'].openDialog();
        }
        async getEnterpriseInfo (id) {
            let res = await this.$http.get(`customers/xingyeLicenceSend/${id}`)
            if (res.status == 200) {
                this.enterpriseForm = res.data;
                this.enterpriseForm.forEach((i) => {
                    switch (i.type) {
                        case 'A1':
                            this.idCartFornt = i
                        case 'A2':
                            this.idCartBank = i;
                        case '20':
                            this.credentials = i;
                        case '40':
                            this.enterAuth = i;
                        case '41':
                            this.unitAuth = i;
                    }
                })
            }
        }

        forntCartImg (valData: any) {
            if(valData != null && valData != undefined){
                this.idCartFornt.file_path = valData.path;
                this.idCartFornt.file_id = valData.id;
            }
        }
        bankCartImg (valData: any) {
            this.idCartBank.file_path = valData.path;
            this.idCartBank.file_id = valData.id;
        }
        credentialImg (valData: any) {
            this.credentials.file_path = valData.path;
            this.credentials.file_id = valData.id;
        }
        enterAuthImg (valData: any) {
            this.enterAuth.file_path = valData.path;
            this.enterAuth.file_id = valData.id;
        }
        unitAuthImg (valData: any) {
            this.unitAuth.file_path = valData.path;
            this.unitAuth.file_id = valData.id;
        }

        async clickSend (type) {
            let file_path = '';
            let file_id = '';
            switch (type) {
                case 'A0':
                    file_path = this.idCartFornt.file_path;
                    file_id = this.idCartFornt.file_id
                    break;
                case 'A2':
                    file_path = this.idCartBank.file_path;
                    file_id = this.idCartBank.file_id
                    break;
                case '20':
                    file_path = this.credentials.file_path;
                    file_id = this.credentials.file_id
                    break;
                case '40':
                    file_path = this.enterAuth.file_path;
                    file_id = this.enterAuth.file_id
                    break;
                case '41':
                    file_path = this.unitAuth.file_path;
                    file_id = this.unitAuth.file_id
                    break;
            }
            let postData = {
                file_path: file_path,
                file_id: file_id,
                type: type
            }
            let res = await this.$http.post(`paying/xingyeapi/sendSingleLicence/${this.form.enterpriseId}`, postData)
            if (res.status == 200) {
                this.getEnterpriseInfo(this.form.enterpriseId);
            }
        }

        loadDataForPagination() {
            this.getXingYeList()
        }
        mounted () {
            this.getXingYeList()
        }
    }
</script>

<style lang="scss" scoped>
    .enterprise_img_list {
        display: flex;
    }
    .send_status {
        margin-top: 6px;
    }
</style>
<style lang="scss">
    .enterprise_img_list {
        width: 940px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .enterInfo_img_box {
            width: 172px;
            height: 148px;
            border: 1px dashed $__color-border;
            padding: 8px 10px;
            margin-bottom: 8px;
            /*img {*/
                /*max-width: 170px;*/
                /*max-height: 148px;*/
            /*}*/
        }
    }
    .upload_send_btn_width {
        .el-button {
            width: 130px;
        }
    }
</style>